<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏网站</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="fonts/iconfont.css">
    <link rel="stylesheet" href="css/style.css">


    <link href="//unpkg.com/layui@2.9.14/dist/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
    <!--引入图标库-->
    <!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">-->

    <link rel="stylesheet" href="elementUI/elementCSS.css"/>

    <!--<link rel="stylesheet" href="css/index.css">-->
</head>

<body>


    <div class="header-bg">
        <img src="images/banner1.jpg" alt="">
        <div class="title">
            论坛
        </div>
    </div>


    <div class="content w py-3 contentBlogDetails">
        <div class="content-l">
            <div class="card">
                <img class="card-img-top" src="images/banner4.jpg" alt="">
                <div class="card-body">
                    <p>
                        <span class="text-muted">日期: 2030/6/11</span>
                    </p>
                    <h3 class="card-title">贴子标题</h3>
                    <p class="card-text">
                        详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,详细的文本内容,
                    </p>
                    <blockquote class="blockquote">
                        <em
                            class="mb-0 blockquote-footer">引用与备注的文本内容区域，引用与备注的文本内容区域，引用与备注的文本内容区域，引用与备注的文本内容区域，引用与备注的文本内容区域，引用与备注的文本内容区域，引用与备注的文本内容区域，引用与备注的文本内容区域，引用与备注的文本内容区域，引用与备注的文本内容区域，引用与备注的文本内容区域，引用与备注的文本内容区域，</em>
                    </blockquote>

                </div>
            </div>
            <h4 class="mb-3">评论区</h4>
            <div class="card mb-3">
                <div class="row no-gutters">
                    <div class="col-2 userBox">
                        <div class="user">
                            <img src="images/user.png" class="card-img" alt="...">
                        </div>
                    </div>
                    <div class="col-10">
                        <div class="card-body">
                            <h5 class="card-title">法外狂徒张三 <small class="text-muted">发布于10分钟之前</small></h5>
                            <p class="card-text">你说的对，你说的有道理</p>

                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-3">
                <div class="row no-gutters">
                    <div class="col-2 userBox">
                        <div class="user">
                            <img src="images/user.png" class="card-img" alt="...">
                        </div>
                    </div>
                    <div class="col-10">
                        <div class="card-body">
                            <h5 class="card-title">法外狂徒张三 <small class="text-muted">发布于10分钟之前</small></h5>
                            <p class="card-text">你说的对，你说的有道理</p>

                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-3">
                <div class="row no-gutters">
                    <div class="col-2 userBox">
                        <div class="user">
                            <img src="images/user.png" class="card-img" alt="...">
                        </div>
                    </div>
                    <div class="col-10">
                        <div class="card-body">
                            <h5 class="card-title">法外狂徒张三 <small class="text-muted">发布于10分钟之前</small></h5>
                            <p class="card-text">你说的对，你说的有道理</p>

                        </div>
                    </div>
                </div>
            </div>
            <h4 class="mb-3">发表评论</h4>
            <form>
                <div class="form-row mb-3">
                    <div class="col">
                        <input type="text" class="form-control" placeholder="用户名">
                    </div>
                    <div class="col">
                        <input type="text" class="form-control" placeholder="邮箱">
                    </div>
                </div>
                <div class="form-group">
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="请输入你的评论内容"></textarea>
                </div>
                <button type="submit" class="btn ">发表</button>
            </form>





        </div>
        <div class="content-r">
            <h4 class="mb-3">搜索</h4>
            <div class="search mb-3 row">
                <div class="col-9 pr-0">
                    <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="搜索">
                </div>
                <div class="col-3 ">
                    <button type="button" class="btn btn-dark">搜索</button>
                </div>
            </div>
            <h4 class="mb-3">分类标签</h4>
            <div class="tags mb-3">
                <span class="badge badge-dark">游戏</span>
                <span class="badge badge-dark">攻略</span>
                <span class="badge badge-dark">视频</span>
                <span class="badge badge-dark">文章</span>
                <span class="badge badge-dark">王者荣耀</span>
                <span class="badge badge-dark">英雄联盟</span>
            </div>
            <h4 class="mb-3">网站信息</h4>
            <footer class="footer shadow-lg">
                <p>健康提示</p>
                <p>啦啦啦游戏网,小朋友快来玩啊!</p>
                <p>友情链接</p>
                <p>
                    <a href="#">百度</a>
                    <a href="#">百度</a>
                    <a href="#">百度</a>
                    <a href="#">百度</a>
                </p>
            </footer>
        </div>
    </div>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

</body>

</html>
